<!--审批模板分类-->
<template>
  <div class="approveTemCinatiner">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <ul class="approveTemCinatiner_ul clearfix1">
        <li
          v-for="(item, index) in temList"
          :key="index"
          @click="toApply(item.id,item.group_id)"
          class="approveTemCinatiner_li"
        >
          <van-image
            width="45"
            height="45"
            :src="imgicon"
            style="vertical-align:middle; margin-right:10px"
          />
          <span>{{item.name}}</span>
        </li>
      </ul>
      <div class="noData" v-show="temList.length==0">
        <van-image width="163px" height="120px" fit="contain" :src="nochekData" />
        <p>暂无数据 ！</p>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { mapState } from "vuex";
import CommonBar from "../common/commonBar";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      nochekData: require("../../../static/image/nochekData.png"),
      temimg: require("../../../static/image/applytem.png"),
      options: {
        type: "icon",
        centerText: "审批模板",
        iconNname: "wap-home",
        lefttype: "left"
      },
      temList: [],
      //下拉刷新
      refreshing: false,
      pageSize: 50,
      pageNumber: 1,
      groupId: "",
      imgicon: ""
    };
  },
  created() {
    this.groupId = this.$route.query.group_id;
    this.imgicon = this.$route.query.imgicon;
    this.GetTemplateList();
  },

  methods: {
    //下拉刷新
    onRefresh() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.temList = [];
      this.GetTemplateList();
    },

    /**模板接口 */
    GetTemplateList() {
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      var params = {
        token: this.token,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        group_id: this.groupId
      };
      this.$http
        .get(`${this.$basePath}?service=App.Template.GetTemplateList&api=89`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.refreshing = false;
            //console.log("模板接口", res);
            this.temList = res.data.list;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    toApply(template_id, group_id) {
      this.$router.push({
        //核心语句
        path: "/attendanceApply", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          template_id,
          group_id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/approve";
</style>